<mat-list-item class="container"
  [@item]="widerPriority"
  [ngClass]="{
    'priority-normal':item.priority === 3,
    'priority-important': item.priority === 2,
    'priority-emergency':item.priority === 1
  }"
  [app-draggable]='true'
  [draggedClass]="'drag-start'"
  [dragData]='item'
  [dragTag]="'task-item'"
  (click)="onItemClick()">
  <mat-checkbox class="completion-status" 
  [checked]='item.completed'
  (click)="onCheckboxClick($event)"></mat-checkbox>
  <div mat-line class="content" [ngClass]="{'completed':item.completed}">
    <span [matTooltip]="item.desc">{{item.desc}}</span>
  </div>
  <div mat-line class="bottom-bar">
    <span class="due-date" *ngIf="item.dueDate">
      {{item.dueDate | date:'yy-MM-dd'}}
    </span>
    <mat-icon *ngIf="item.reminder">alarm</mat-icon>
  </div>
  <mat-icon class="avatar" mat-list-avatar [svgIcon]='avatar'></mat-icon>
</mat-list-item>
